<template>
  <div>
    <div
      v-for="item in playlists"
      @click="toPlayList(item.id)"
      class="each-songlist"
      :key="item.id"
    >
      <div class="each-songlist-left">
        <img v-lazy="item.coverImgUrl" alt="" />
      </div>
      <div class="each-songlist-right">
        <h3 class="each-songlist-name">{{ item.name }}</h3>
        <div class="each-songlist-msg">
          {{ item.trackCount }}首 by {{ item.creator.nickname }}, 播放{{
            item.playCount
          }}次
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
// TODO: 此页面也许还需需要完善
import { APIType } from "@/api";
import { CommonIdType } from "@/model/id-or-enum.model";
import { SongListInfo } from "@/model/music-info.model";
import { Vue, Component } from "vue-property-decorator";
import Router from "vue-router";
@Component({})
export default class UserMusicComponent extends Vue {
  loading = false;
  loadingText = "努力加载中...";
  playlists: SongListInfo[] = [];

  $api: APIType;
  $router: Router;

  mounted() {
    this.fetchData();
  }
  fetchData() {
    this.$api.getRecommendSongs().then((res) => {
      this.playlists = res.recommend;
    });
  }

  toPlayList(id: CommonIdType) {
    this.$router.push({ path: `/playlist/${id}` }).catch((err) => err);
  }
}
</script>

<style></style>
